<template>
  <div class="page">
  </div>
</template>

<script>
  require('echarts-wordcloud');
  export default {
    name: "home",
    data() {
      return {
        // token: this.commonConst.token
      }
    },
    mounted() {
      this.$nextTick(() => {
        // this.trendLine();
        // this.zbPie();
        // this.qyWordCloud();
      });
    },
    methods: {
      /*趋势分析*/
      trendLine() {
        let trendChart = this.$echarts.init(document.getElementById('trendChart'));
        trendChart.setOption({
          tooltip: {
            trigger: 'axis'
          },
          grid: {
            left: '4%',
            right: '4%',
            bottom: '6%',
            containLabel: true
          },
          legend: {
            top: '4%',
            data: ['收益', '患者人数']
          },
          xAxis: {
            type: 'category',
            axisLine: {
              lineStyle: {
                color: '#ccc'
              }
            },
            data: ['2018-03', '2018-04', '2018-05', '2018-06', '2018-07', '2018-08', '2018-09', '2018-10', '2018-11', '2018-12']
          },
          yAxis: [
            {
              type: 'value',
              name: '收益（元）',
              nameTextStyle: {
                color: '#333'
              },
              axisLine: {
                lineStyle: {
                  color: '#ccc'
                }
              },
              splitLine: {
                lineStyle: {
                  color: ['#f2f2f2']
                }
              },
              min: 0,
              max: 1800,
              interval: 600
            },
            {
              type: 'value',
              name: '患者人数（个）',
              nameTextStyle: {
                color: '#333'
              },
              axisLine: {
                lineStyle: {
                  color: '#ccc'
                }
              },
              splitLine: {
                lineStyle: {
                  color: ['#f2f2f2']
                }
              },
              min: 0,
              max: 30,
              interval: 5
            }
          ],
          series: [
            {
              type: 'bar',
              name: '收益',
              barWidth: '26%',
              itemStyle: {
                color: '#7dc1f0'
              },
              data: [820, 932, 901, 934, 1290, 1330, 1620, 1340, 1220, 1420]
            },
            {
              type: 'line',
              name: '患者人数',
              yAxisIndex: 1,
              itemStyle: {
                color: '#6cc19e'
              },
              areaStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#6cc19e'
                    },
                    {
                      offset: 1,
                      color: '#fff'
                    }
                  ],
                  globalCoord: false
                }
              },
              data: [3, 6, 12, 10, 16, 8, 22, 13, 16, 19]
            }
          ]
        });
      },

      /*各项服务占比*/
      zbPie() {
        let zbChart = this.$echarts.init(document.getElementById('zbChart'));
        zbChart.setOption({
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            x: 'center',
            y: 'top',
            top: '4%',
            data: ['服务包', '一键处方', '单次咨询', '检测解读']
          },
          calculable: true,
          series: [
            {
              name: '各项服务占比',
              type: 'pie',
              radius: '60%',
              center: ['50%', '58%'],
              roseType: 'radius',
              data: [
                {
                  value: 162,
                  name: '服务包',
                  itemStyle: this.commonFunction.createRandomItemStyle()
                },
                {
                  value: 178,
                  name: '一键处方',
                  itemStyle: this.commonFunction.createRandomItemStyle()
                },
                {
                  value: 111,
                  name: '单次咨询',
                  itemStyle: this.commonFunction.createRandomItemStyle()
                },
                {
                  value: 222,
                  name: '检测解读',
                  itemStyle: this.commonFunction.createRandomItemStyle()
                }
              ]
            }
          ]
        });
      },

      /*服务涉及区域*/
      qyWordCloud() {
        let qyChart = this.$echarts.init(document.getElementById('qyChart'));
        qyChart.setOption({
          tooltip: {
            show: true
          },
          series: [
            {
              name: '服务涉及区域',
              type: 'wordCloud',
              shape: 'circle',
              gridSize: 26,
              sizeRange: [15, 60],
              rotationRange: [-90, 90],
              rotationStep: 45,
              data: [
                {
                  name: '成都',
                  value: 4000,
                  textStyle: this.commonFunction.createRandomTextStyle()
                },
                {
                  name: '乐山',
                  value: 6181,
                  textStyle: this.commonFunction.createRandomTextStyle()
                },
                {
                  name: '宜宾',
                  value: 4386,
                  textStyle: this.commonFunction.createRandomTextStyle()
                },
                {
                  name: '自贡',
                  value: 4055,
                  textStyle: this.commonFunction.createRandomTextStyle()
                },
                {
                  name: '安岳',
                  value: 2467,
                  textStyle: this.commonFunction.createRandomTextStyle()
                },
                {
                  name: '都江堰',
                  value: 2244,
                  textStyle: this.commonFunction.createRandomTextStyle()
                },
                {
                  name: '温江',
                  value: 1898,
                  textStyle: this.commonFunction.createRandomTextStyle()
                },
                {
                  name: '阆中',
                  value: 1484,
                  textStyle: this.commonFunction.createRandomTextStyle()
                },
                {
                  name: '南充',
                  value: 1112,
                  textStyle: this.commonFunction.createRandomTextStyle()
                },
                {
                  name: '大理',
                  value: 965,
                  textStyle: this.commonFunction.createRandomTextStyle()
                },
                {
                  name: '武昌',
                  value: 584,
                  textStyle: this.commonFunction.createRandomTextStyle()
                },
                {
                  name: '昌吉',
                  value: 847,
                  textStyle: this.commonFunction.createRandomTextStyle()
                }
              ]
            }
          ]
        });
      }
    }
  }
</script>

<style>
</style>
